<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Ckyplayer组件使用示例</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Author" content="larry" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css" media="all">
    <style>
        body{
            background: #f2f2f2;
        }
        .video{
            display: block;
            width: 100%;
            height: auto;
        }
        .margin15{
            margin: 15px;
        }
    </style>
</head>

<body>
     <div class="layui-container">
        <section class="layui-card">
            <div class="layui-card-body">
                <div class="video" id="video"  style="width: 100%;"></div>
            </div>
        </section>
    </div>
<table  class="layui-table "  lay-size="lg" lay-even>
    <colgroup>
        <col>
        <col>
     </colgroup>
    <tbody id="tbody">
     <tr>
         <td>名称</td>
         <td></td>
     </tr>
     <tr>
         <td>时间</td>
         <td></td>
     </tr>
     <tr>
         <td>真实路径</td>
         <td></td>
     </tr>

    </tbody>
</table>
<script type="text/javascript" src="layui/layui.js"></script>

<script type="text/javascript">
    layui.config({
        base: '/lib/'
    }).extend({
        ckplayer: 'ckplayer/ckplayer'
    }).use(['jquery', 'ckplayer'], function() {
        var $ = layui.$,
            ckplayer = layui.ckplayer;
            var code = decodeURI(location.href.split("?")[1]);
            $.getJSON("/detail?"+code,function (res) {
                $('#tbody > tr:nth-child(1) > td:nth-child(2)').text(res.name);
                $('#tbody > tr:nth-child(2) > td:nth-child(2)').text(res.date);
                $('#tbody > tr:nth-child(3) > td:nth-child(2)').text(res.path);


                 document.title=res.name;

                var url = res.url,
                    config = {
                        container: '#video',
                        loop: true,
                        autoplay: true,
                        video: [
                            [url, 'video/mp4',autoplay="autoplay"]
                        ]
                    };
                var player = new ckplayer(config);
            });
    });
</script>
</body>

</html>